<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>操作日志</title>
</head>
<body>
<div id="app">
    <div style="text-align: center">
        <h2>操作日志</h2>
        <!--        <el-link href="/index" type="primary" :underline="false"><h3>首页</h3></el-link>-->
        <el-table
                :data="operationList"
                v-loading="loading"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    type="index"
                    :index="indexMethod"
                    label="编号"
                    align="center"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="url"
                    label="访问路径"
                    show-overflow-tooltip="true"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="访问ip"
                    align="center"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="访问内容"
                    align="center"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="operationSystem"
                    label="操作系统"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="ip4Host"
                    label="内网ip"
                    align="center"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="loginName"
                    label="操作用户"
                    align="center"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="createTime"
                    align="center"
                    label="操作时间"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    align="center"
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button @click="deleteById(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="pagination-container" style="text-align: center;padding-top: 30px">
        <el-pagination
                class="pagiantion"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>
    </div>
</div>
<script th:src="@{/axios.min.js}"></script>
<script th:src="@{/vue.js}"></script>

<!-- 引入样式 -->
<link rel="stylesheet" th:href="@{/element-ui.css}">
<!-- 引入组件库 -->
<script th:src="@{/element-ui.js}"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            operationList: [],
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize: 8,
                total: 100,
                queryString: null,
            },
            loading: true
        },
        created() {
            this.findPage()
        },
        methods: {
            //自定义索引
            indexMethod(index) {
                return index + 1;
            },
            deleteById(id) {
                this.loading = true
                axios.delete("/operation/deleteById/" + id).then(resp => {
                    if (resp.data.flag) {
                        this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                        this.findPage()
                    } else {
                        this.loading = false
                        this.$message.error(resp.data.message);
                    }
                })
            },

            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            },

            findPage() {
                //发送ajax请求，提交分页相关请求参数（页码、每页显示记录数、查询条件）
                var param = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                }
                axios.post("/operation/findPage", param).then(resp => {
                    if (resp.data.flag) {
                        this.operationList = resp.data.data
                        this.pagination.total = resp.data.total;
                        this.loading = false
                    } else {
                        this.loading = false
                        this.$message.error(resp.data.message);
                    }
                })
            },
        }
    })
</script>
</body>
</html>